<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学子F1左侧</title>
    <style>
        /*1.选中所有元素，清除自带的内外间距*/
        * {
            margin: 0;
            padding: 0;
        }
        .f1>.left {
            /*2.设置F1左侧块的宽高与背景色*/
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            /*3.背景图处理*/
            /*插入背景图*/
            background-image: url(img/computer1.png);
            /*设置背景图不重复*/
            background-repeat: no-repeat;
            /*设置背景图尺寸:宽度 高度*/
            background-size: 318px 319px;
            /*设置背景图位置:水平方向 垂直方向*/
            background-position: 265px 35px;
            /*5.设置父元素结界，防止父子贴边*/
            overflow: hidden;
        }
        /*4.设置F1左侧的文字区域*/
        .f1>.left>.text {
            width: 245px;
            height: 232px;
            /*辅助色用完了去掉
            background-color: yellow;*/
            /*margin-top: 68px;
            margin-left: 36px;*/
            /*四个方向的外间距 上 右 下 左*/
            margin: 68px 0 0 36px;
        }
        /*6.设置商品标题样式*/
        .f1>.left>.text>.p_title {
            font-size: 32px;
            color: #333;
            /* 字重:细体 */
            font-weight: lighter;
        }
        /*7.设置商品介绍样式*/
        .f1>.left>.text>.p_intro {
            font-size: 12px;
            color: #666;
            font-weight: lighter;
            /*内间距:上12 下24*/
            padding: 12px 0 24px 0;
        }
        /*8.设置商品价格*/
        .f1>.left>.text>.p_price {
            font-size: 24px;
            color: #0aa1ed;
            font-weight: bold;
            /*下外间距:12px*/
            margin-bottom: 12px;
        }
        /*9.设置查看详情按钮*/
        .f1>.left>.text>a {
            display: block;
            width: 132px;
            height: 40px;
            background-color: #0aa1ed;
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            text-align: center;
            line-height: 40px;

        }
    </style>
</head>
<body>
    <div class="f1">
        <div class="left">
            <div class="text">
                <p class="p_title">灵越 燃7000系列</p>
                <p class="p_intro">
                    酷睿双核i5处理器|256GB SSD| 8GB内存<br>
                    英特尔HD显卡620含共享显卡内存
                </p>
                <p class="p_price">￥4999.00</p>
                <a href="#">查看详情</a>
            </div>
        </div>
        <div class="right"></div>
    </div>
</body>
</html>